import React, { Component } from 'react'
import FrameLayout from '../../layout'
import { Select, List } from 'antd'
import { NavLink } from "react-router-dom"


// import ReactEcharts from 'echarts-for-react'

import './index.less'
import Pie from '../../components/pie';


export default class Home extends Component {
  render() {

    const { Option } = Select

    const data = [
      '史器统应关究组',
      '没记内儿八细',
      '将强表却目长领而',
      '例见声收目方好要',
      '总情易周了我何现',
    ];

    function handleChange(value) {
      console.log(`selected ${value}`);
    }

    return (
      <FrameLayout>
        <h2 style={{ fontWeight: '800', fontSize: 28 }}>首页</h2>
        <div className='infobar'>
          <div className='part1 infobox'>
            <div className='top'>
              <span>新增数据</span>
              <Select
                defaultValue="本周" style={{ width: 122, height: 24, fontSize: 13 }} onChange={handleChange}>
                <Option value="week">本周</Option>
                <Option value="month">本月</Option>
                <Option value="season">本季度</Option>
              </Select>
            </div>
            <div className='bottom'>
              <NavLink
              style={{
                color: "rgba(0, 0, 0, 0.65)"
                }}
                to="/admin/users/userslist"
              >
                <div><b>50</b><p>新增用户</p></div>
              </NavLink>
              <NavLink
              style={{
                color: "rgba(0, 0, 0, 0.65)"
                }}
                to="/admin/abroadmeeting"
              >
                <div><b>70</b><p>新增会议</p></div>
              </NavLink>
              <NavLink
              style={{
                color: "rgba(0, 0, 0, 0.65)"
                }}
                to="/admin/goods/goodsorder"
              >
                <div><b>50</b><p>新增物料</p></div>
              </NavLink>
            </div>
          </div>
          <div className='part2 infobox'>
            <div className='top'>
              <span>系统公告</span>
            </div>
            <div className='bottom' style={{ padding: 0 }}>
              <List
                size="large"
                itemLayout="vertical"
                dataSource={data}
                renderItem={item => <List.Item style={{width:448, height:55}} extra='2020-07-08'>{item}</List.Item>}
              />
            </div>
          </div>
          <div className='part3 infobox'>
            <div className='top'>
              <span>待办事项</span>
              <Select
                defaultValue="本周" style={{ width: 122, height: 24, fontSize: 13 }} onChange={handleChange}>
                <Option value="week">本周</Option>
                <Option value="month">本月</Option>
                <Option value="season">本季度</Option>
              </Select>
            </div>
            <div className='bottom'>
              <div><b>50</b><p>待分名额</p></div>
              <div><b>70</b><p>待审物料</p></div>
              <div><b>50</b><p>待发物料</p></div>
            </div>
          </div>
          <div className='part4 infobox'>
            <div className='top'>
              <span>会议统计</span>
              <Select
                defaultValue="本周" style={{ width: 122, height: 24, fontSize: 13 }} onChange={handleChange}>
                <Option value="week">本周</Option>
                <Option value="month">本月</Option>
                <Option value="season">本季度</Option>
              </Select>
            </div>
            <Pie />
          </div>
        </div>
      </FrameLayout>
    )
  }
}
